import React from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { WingBlank, WhiteSpace, List, Flex, Toast, TextareaItem, Button, Checkbox, Icon } from 'antd-mobile';
import { createForm } from 'rc-form';
import MemberInfo from 'components/MemberInfo';
import { ChdScaleReport, ScalePrograme } from 'components/scale';

const { Item, Item: { Brief } } = List;
const { CheckboxItem, AgreeItem } = Checkbox;

const NativeScaleChdReportPage = (props) => {
  const { dispatch, location, form, scalevalue, report, ...rest } = props;
  const { getFieldProps, getFieldError, validateFields } = form;
  const {ProgrameRec} = report;
  const exitHandler = () => {
    //Toast.info('点击后退退出', 1);  
    window.location = 'http://goBack';
  };

  const submitHandler = () => {

    validateFields((errors, value) => {
      if (errors) {
        const fieldNames = Object.keys(errors);
        if (fieldNames[0]) {
          return Toast.fail(getFieldError(fieldNames[0]));
        }
      }
      const {recids} = props; 
      // value.programeint = rest.programeint.join(';');
      const programerec = recids.join(';');

      const { type, doctorid, patientid, patientvalue } = location.state;

      const payload = {
        type,
        doctorid,
        patientid,
        patientvalue,
        Report1: report.Report1,
        Report2: report.Report2,
        Report3: report.Report3,
        Report4: report.Report4,
        Report5: report.Report5,
        programerec,
        // programe: Programe,
        ...value,
      };
      dispatch({
        type: 'scale/submitScalePrograme',
        payload,
      });
    });

    Toast.success('保存绑定成功', 1);
    window.location = 'http://goBack';
  };

  return (
    <div>
      <MemberInfo {...location.state.member} />
      
      <WhiteSpace />
      <ChdScaleReport {...report} />
      <WhiteSpace />
      <WingBlank size="md">
      <List>
        <Item>
          <Flex justify="center">选择方案</Flex>
        </Item>
        
        { !ProgrameRec ? "无方案" : ProgrameRec.map(item => (
          <AgreeItem
            key={item.Prog}
            onChange={e =>
              dispatch({
                type: 'scale/savePrograme',
                payload: {
                  type: 'programerec',
                  value: item.Prog,
                },
              })}
          >
            {item.Url ?<Flex align="center" justify="between">
                          {item.Title}
                          <Flex align="center">
                            <a href={item.Url} target="_blank">查看方案</a>
                            <Icon type="right" style={{ fill: '#ccc' }} />
                          </Flex>
                        </Flex>
              :<Flex align="center" justify="between"
                style={{ border: '1px solid #ddd', padding: "10px", textIndent: "2em" }}
                >
                {item.Detail.replace(/@/g," \r ").replace(/;/g," \r ")}
                </Flex>
            }
          </AgreeItem>
        ))}
      </List>
    </WingBlank>
      <WingBlank size="md">
        <List>
          <Item>
            备注：
            <Brief>
              <TextareaItem
                {...getFieldProps('comment', {
                  initialValue: '',
                })}
                rows={3}
                style={{ border: '1px solid #ddd' }}
              />
            </Brief>
          </Item>
        </List>
        <List>
          <WhiteSpace size="xl" />
          <WingBlank>
            <Flex>
              <Flex.Item>
                <Button onClick={exitHandler}>退出</Button>
              </Flex.Item>
              <Flex.Item>
                <Button type="primary" onClick={submitHandler}>保存</Button>
              </Flex.Item>
            </Flex>
          </WingBlank>
          <WhiteSpace size="xl" />
        </List>
      </WingBlank>
    </div>
  );
};

export default connect(({ scale }) => ({ ...scale }))(createForm()(NativeScaleChdReportPage));
